<!-- 选择查询条件 -->
<div class="panel panel-default right-filter-panel fade">
    <div class="filter-btn">
        <i class="glyphicon glyphicon-filter"></i>
        <span class="badge" style="background-color: red;"> 0 </span>
    </div>
    <div class="panel-heading">
        <h3 class="panel-title text-center">表格筛选项</h3>
    </div>
    <div class="panel-body">
        <form class="form-horizontal">
            
            <template v-for="condition in conditionSet">
            
            <!-- group-button -->
            <div class="form-group" v-if="condition.type == 'group-button'">
                <label class="col-sm-3 control-label"> {{condition.label}} </label>
                <div class="col-sm-9">
                	<group-button 
                    	v-bind:buttonName="''"
                       	v-bind:values="condition.values" 
                       	v-bind:selected="condition.changedVal" 
                       	v-on:changeSelected="function(val){condition.changedVal = val;}"
                     />
                </div>
            </div>
            
            <!-- select -->
            <div class="form-group" v-if="condition.type == 'select'">
                <label class="col-sm-3 control-label"> {{condition.label}} </label>
                <div class="col-sm-7">
                	<select class="form-control" v-model="condition.changedVal">
                		<option v-for="option in condition.values" v-bind:value="option.key" >
					    	{{ option.label }}
					  	</option>
                	</select>
                </div>
            </div>
            
            </template>
            
        </form>
    </div>
    <div class="panel-footer text-center">
        <button v-on:click="queryReset" class="btn btn-default"> 重置 </button>
        &nbsp;&nbsp;
        <button v-on:click="queryComplete" class="btn btn-default"> 确定 </button>
    </div>
</div>